<template>
  <div class="box-bg-color">
    <div class="filter-container">
      <div class="filter-item">
        <el-select v-model="searchReq.status" clearable style="width: 100px" placeholder="请选择">
          <el-option label="成功" :value="1">
            <k-badge type="primary" content="成功"></k-badge>
          </el-option>
          <el-option label="失败" :value="0">
            <k-badge type="danger" content="失败"></k-badge>
          </el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <el-input v-model="searchReq.userName" placeholder="请输入登录用户名" style="width: 200px" clearable></el-input>
      </div>
      <div class="filter-item">
        <el-button type="primary" @click="searchEvent">搜索</el-button>
      </div>
    </div>

    <k-table
      ref="tableRef"
      v-bind="tableData"
      :callback="getLoginlogListApi"
      :loading="loading"
      stripe
      current-row-key="id"
    >
      <template #logo="{ row }">
        <div class="user-account-wrap" style="justify-content: center;">
          <el-avatar :src="row.logo" shape="square" :size="40"></el-avatar>
        </div>
      </template>
      <template #status="{ row }">
        <k-badge
          :type="row.status === 1 ? 'primary' : 'danger'"
          :content="row.status === 1 ? '成功' : '失败'"
        ></k-badge>
      </template>
    </k-table>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElSelect, ElCheckbox, type UploadRawFile } from 'element-plus'
import type { IKTableProps } from 'k-ui'

import appConfig from '@/config/index'
import { getToken } from '@/utils/cache'
import { confirmElBox, dateStrFormat, downLoad } from '@/utils'

import {
  getLoginlogList,
  type QueryLoginlogList,
  type LoginlogApiResult
} from '@/api/loginlog'

import type { ListResultData, Pagination } from '@/api/base'
import { hasPerms } from '@/utils/perm'
import { useApiLock } from '_hooks'

const tableRef = ref()
const tableData = ref<IKTableProps<LoginlogApiResult>>({
  mode: 'config',
  data: { list: [], total: 0 },
  auto: true,
  isPager: true,
  pageSize: 20,
  index: true,
  columns: [
    { label: '用户名称', prop: 'userName', slot: true },
    { label: '登录ip', prop: 'loginIp', default: '--' },
    { label: '登录地点', prop: 'loginAddress', default: '--', width: 120 },
    { label: '登录浏览器', prop: 'loginBrowser', default: '--' },
    { label: '登录系统', prop: 'loginSystem', default: '--' },
    { label: '状态', prop: 'status', slot: true, width: 100 },
    {
      label: '登录时间',
      prop: 'createDate',
      formatter: (row: LoginlogApiResult) => dateStrFormat(row.createDate as string),
      width: 100
    }
  ]
})

const paginationOption = ref({
  pageSize: 10, // 每页显示条数
  currentPage: 1, // 当前页
  pagerCount: 5, // 按钮数，超过时会折叠
  total: 0, // 总条数
})

const loading = ref<boolean>(false)

const searchReq = ref<QueryLoginlogList>({
  page: 1,
  size: 20,
  status: '',
  userName: '',
})
// 查询表格事件
const queryReq = ref<QueryLoginlogList>({ page: 1, size: 20 })

const getLoginlogListApi = async ({ page, size }: Pagination) => {
  loading.value = true
  const res = await useApiLock(() => getLoginlogList({ ...queryReq.value, page, size } as QueryLoginlogList), 500)
  loading.value = false
  if (res?.code === 200) {
    const data = res.data as ListResultData<LoginlogApiResult>
    tableData.value.data = data
    paginationOption.value.total = data.total
  } else {
    ElMessage({ message: res?.msg || '网络异常，请稍后重试', type: 'error' })
  }
}

const getSelectApi = async ({ page, size }: Pagination, selectValue: any, isGetMore: boolean) => {
  console.log(page, size, selectValue)
  if (isGetMore) {
    getLoginlogListApi({page, size})
  }
}

const updateOperalogSuccess = (newPage = {}) => {
  // 在当前页 重新加载数据
  tableRef.value.refreshData(newPage)
}

const searchEvent = () => {
  queryReq.value = Object.assign({}, searchReq.value)
  updateOperalogSuccess({ page: 1, size: 10 })
}
</script>

<style lang="scss" scoped>
.user-account-wrap {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.upload-wrap {
  display: flex;
}
</style>
